<template>
  <div class="login_front">
    <Headnav></Headnav>
    <!-- 网站大图标 -->
    <div class="logo">
      <div>
        <img src="http://cdn.hwzhj.top/rl_top.35edfde.png">
      </div>
    </div>
    <!-- 登录页面 "登录" 区域 -->
    <div class="page-width">
      <div class="exple">
        <span class="line"></span>
        <span class="txt">登录</span>
        <span class="line"></span>
      </div>
      <div class="xian">
        <div class="login_left">
          <img src="登录图片">
        </div>
        <div class="shu"></div>
        <!-- <input type="text" value="" placeholder="你的手机号/邮箱" style="border: 1px solid; border-radius:5px; width:160px; height: 40px; width: 310px; margin-top: 27px;" /><br>
        <input type="text" value="" placeholder="密码" style="border: 1px solid; border-radius:5px;width:160px; height: 40px; width: 310px; margin-top: 27px;" />-->
        <div class="login-right">
          <div class="logo-box">
            <div class="login" style>
              <div class="bxs-row" style="text-align:center;">
                <img id="logo" src="images/img/logo.jpg图片" style="width:72px;">
                <span class="tips" style="color:red;">忍住不哭来段口技</span>
              </div>
              <div class="bxs-row">
                <input type="text" class="username" placeholder="用户名" value>
                <p class="err err-username"></p>
              </div>
              <div class="bxs-row">
                <input type="password" class="password" placeholder="密码">
                <p class="err err-password"></p>
              </div>
              <div class="bxs-row">
                <input type="submit" class="submit btn" @click="abc()" value="登录">
              </div>
              <router-link :to="{name:'register'}">还没有账号?赶紧点击此处去注册吧</router-link>
            </div>
            <div class="verBox">
              <div id="imgVer" style="display:inline-block;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: "111111",
        username: "markerhub",
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async submitForm(formName) {
      try {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // 提交逻辑
            const res = await this.$axios.post("/login", this.ruleForm);
            const jwt=res.headers["authorization"]//头文件判断
            const userInfo=res.data.data
            console.log(userInfo)
            //const token = res.headers["authorization"];
            this.$store.commit("SET_TOKEN", jwt);
            this.$store.commit("SET_USERINFO", userInfo);
            // vuex保存信息
            this.go("blogs");// 路由跳转(main.js全局混入)
          } else {
            console.log("error submit!!"); // 表单验证错误
            return false;
          }
       });
      } catch (e) {
        console.log(e.message || e); // 错误内容
        console.log("api error!!"); // try{}内代码执行错误
      }
    },
    // submitForm(formName) {
    //   const _this = this;
    //   this.$refs[formName].validate((valid) => {
    //     // 对ref为ruleForm的form表单进行rules的规则验证，返回验证结果valid=>true/false
    //     if (valid) {
          
    //       // 提交逻辑
    //       this.$axios
    //         .post("/login", this.ruleForm)
    //         .then((res) => {//后端发送回来的内容
    //             // console.log(res.headers)
    //             // console.log(res)
    //             const jwt=res.headers["authorization"]//头文件判断
    //             const userInfo=res.data.data
    //             console.log(userInfo)
    //           //const token = res.headers["authorization"];
    //           _this.$store.commit("SET_TOKEN", jwt);
    //           _this.$store.commit("SET_USERINFO", userInfo);
    //           // vuex保存信息
    //           _this.$router.push("/blogs");// 路由跳转
    //         });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.$notify({
      title: "看这里：",
      message: "关注公众号：MarkerHub，回复【vueblog】，领取项目资料与源码",
      duration: 1500,
    });
  },
};
</script>

<style scoped>
@import "../../public/css/style.css";
.logo {
  margin-top: 10px;
  background-color: rgb(0, 160, 216);
  height: 86px;
}

.logo div {
  margin: 0 auto;
  width: 980px;
}
/* .logo div img {
} */
.exple {
  margin-top: 25px;
  height: 50px;
  line-height: 60px;
  text-align: center;
}

.line {
  display: inline-block;
  width: 450px;
  border-top: 1px solid #ccc;
  margin-bottom: 5px;
  height: 0.5px;
  background: black;
}

.exple .txt {
  color: #686868;
  vertical-align: middle;
  font-size: 35px;
}

.shu {
  height: 392px;
  width: 1px;
  background: #ccc;
  margin: 0 auto;
  float: none;
  display: inline-block;
}

.xian {
  margin-top: 40px;
  padding-bottom: 40px;
}

.login_left {
  height: 390px;
  width: 490px;
  float: left;
}

.login-right {
  display: inline-block;
  height: 380px;
  width: 429px;
  top: 0px;
  right: 300px;
}

.bxs-row {
  margin-bottom: 12px;
}

.logo-box {
  width: 404px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  height: 390px;
}

.login {
  position: absolute;
  width: 335px;
  left: 0;
  top: 0;
  padding: 42px 42px 36px;
  transition: all 0.8s;
}

.username,
.password,
.btn {
  height: 44px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid #9da3a6;
  background: #fff;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #000;
  font-size: 1em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  direction: ltr;
  font-size: 13px;
}

.submit {
  background-color: #0070ba;
  color: #fff;
  border: 1px solid #0070ba;
}

.submit:hover {
  background-color: #005ea6;
}

.verBox {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 404px;
  top: 0;
  opacity: 0;
  transition: all 0.8s;
  padding-top: 55px;
}

.err {
  margin: 12px 0 0;
  line-height: 12px;
  height: 12px;
  font-size: 12px;
  color: red;
}
</style>